// Copyright (c) 2025 coze-dev Authors
// SPDX-License-Identifier: Apache-2.0
import { createTheme, tags as t } from '@coze-editor/editor/preset-code';
import { EditorView } from '@codemirror/view';

const colors = {
  background: '#fff',
  // syntax
  comment: '#000A298A',
  key: '#00818C',
  string: '#D1009D',
  number: '#C74200',
  boolean: '#2B57D9',
  null: '#2B57D9',
  separator: '#0F1529D1',
};

export const cozeLight = [
  EditorView.theme({
    '.cm-completionIcon-property': {
      backgroundImage:
        'url("' +
        '' +
        '")',
      backgroundSize: '11px 11px',
      backgroundRepeat: 'no-repeat',
      width: '11px',
      height: '11px',
    },
    '.cm-completionIcon-property::after': {
      content: '""',
    },
  }),
  createTheme({
    variant: 'light',
    settings: {
      background: colors.background,
      foreground: '#4D4D4C',
      caret: '#AEAFAD',
      selection: '#52649A21',
      gutterBackground: colors.background,
      gutterForeground: '#000A298A',
      gutterBorderColor: 'transparent',
      gutterBorderWidth: 0,
      lineHighlight: '#efefef78',
      bracketColors: ['#E4D129', '#AC05FF', '#2B57D9'],
      tooltip: {
        backgroundColor: 'var(--coz-bg-max)',
        color: 'var(--coz-fg-primary)',
        border: 'solid 1px var(--coz-stroke-plus)',
        boxShadow: 'var(--coz-shadow-default)',
        borderRadius: '8px',
      },
      tooltipCompletion: {
        backgroundColor: '#FFFFFF',
        color: '#060709CC',
      },
      completionItemHover: {
        backgroundColor: '#5768A114',
      },
      completionItemSelected: {
        backgroundColor: '#52649A21',
      },
      completionItemIcon: {
        color: '#060709CC',
      },
      completionItemLabel: {
        color: '#060709CC',
      },
      completionItemDetail: {
        color: '#2029459E',
      },
    },
    styles: [
      // JSON
      {
        tag: t.comment,
        color: colors.comment,
      },
      {
        tag: [t.propertyName],
        color: colors.key,
      },
      {
        tag: [t.string],
        color: colors.string,
      },
      {
        tag: [t.number],
        color: colors.number,
      },
      {
        tag: [t.bool],
        color: colors.boolean,
      },
      {
        tag: [t.null],
        color: colors.null,
      },
      {
        tag: [t.separator],
        color: colors.separator,
      },

      // shell
      // curl
      {
        tag: [t.standard(t.variableName)],
        color: '#00804A',
      },
      // -X
      {
        tag: [t.attributeName],
        color: '#C74200',
      },
      // cp-disable-next-line
      // url in string (includes quotes), e.g. "https://..."
      {
        tag: [t.special(t.string)],
        color: '#2B57D9',
      },
    ],
  }),
];
